<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="google-site-verification" content="LgblCrocw4d4ccdOkob0kzt3Ing7mMy1dKTtLoUb-2s" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="how crop images, how zoom images, crop image,CropZooom, rotate image, zoom image, jquery plugin, crop plugin, zoom plugin, rotation, croppping, zooming" />
<meta name="description" content="CropZoom is a plugin that let you select, rotate and zoom an image to make a crop. This is free and ready to use." />  
<title>图片剪裁</title>
<script type="text/javascript" src="${ctxStatic}/crop/cropzoom/1.2/demo/js/script.js"></script>
<link href="${ctxStatic}/crop/cropzoom/1.2/demo/css/jquery-ui-1.10.3.custom.min.css" rel="Stylesheet" type="text/css" /> 
<link href="${ctxStatic}/crop/cropzoom/1.2/demo/css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 
<script type="text/javascript" src="${ctxStatic}/crop/cropzoom/1.2/demo/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/crop/cropzoom/1.2/demo/js/jquery-ui-1.10.3.custom.min.js"></script>
<%-- <script type="text/javascript" src="${ctxStatic}/crop/cropzoom/1.2/demo/js/jquery.cropzoom.js"></script>
 --%>
<script type="text/javascript" src="${ctxStatic}/crop/cropzoom/1.2/plugin/jquery.cropzoom.js"></script>

<link rel="stylesheet" href="${ctxStatic}/crop/cropzoom/1.2/demo/css/style.css" type="text/css" media="screen" />
    
<script>

var srcImage = '${imgUrl}';
var cropAction = '${ctx}/cms/imageinfo/cropImage';
var deleteAction = '${ctx}/cms/imageinfo/deleteImage';
var imageSrcWidth = '${imageWidth}';
var imageSrcHeight = '${imageHeight}';
var viewWidth = 500;
var viewHeight = 400;

var inputId = '${inputId}';
var callbackFun = '${callbackFun}';
/* srcImage = '/soccercms/userfiles/1/images/cms/recommen/2015/05/u=83662261,2185142563&fm=116&gp=0.png';
imageSrcWidth = 500;
imageSrcHeight = 400; */
if(srcImage == null ||srcImage == ''){
	srcImage = '${ctxStatic}/crop/cropzoom/1.2/demo/chicas1024.jpg';
	imageSrcWidth = 1024;
	imageSrcHeight = 768;
}
if(imageSrcWidth == null ||imageSrcWidth == ''){
	imageSrcWidth = 500;
}
if(imageSrcHeight == null ||imageSrcHeight == ''){
	imageSrcHeight = 400;
}
if(imageSrcWidth<500){
	var rate = imageSrcWidth/500;
	viewWidth  = 500;
	viewHeight = imageSrcHeight/rate;
}else{
	viewWidth = imageSrcWidth;
	viewHeight = imageSrcHeight;
}




$(document).ready(function() {
	var cropzoom = $('#crop_container').cropzoom({ 
		width:viewWidth,
        height:viewHeight,
        bgColor: '#CCC',
        enableRotation:true,
        enableZoom:true,
        zoomSteps:10,
        rotationSteps:10,
        selector:{        
          centered:true,
          startWithOverlay: true,
          showPositionsOnDrag: false,
          showDimetionsOnDrag: false,
          borderColor:'blue',
          borderColorHover:'red',
          onSelectorDrag: setImgConfig,
          onSelectorDragStop:setImgConfig,
          onSelectorResize: setImgConfig,
          onSelectorResizeStop: setImgConfig
        },
         image: { 
             source: srcImage, 
             width:imageSrcWidth,
             height:imageSrcHeight,
             minZoom:10,
             maxZoom:1000,
             onZoom: setImgConfig,
             onRotate: setImgConfig,
             onImageDrag: setImgConfig
          } 
    }); 
	cropzoom.setSelector(45,45,200,150,false);
   $("#crop").click(function(e,data){ 
	   //删除原有图片
	   var path = $('.result').find('img').attr('src');
	   var status = 0;
	   if(path!=null && path!=''){
		   var data = {'imgUrl':path};
		   jQuery.ajax({  
				url: deleteAction, async : false,type: "POST",
				data : data,
				success: function(response) {
					info = response;
					if(info.status == '1'){
						status = 1;
					}
				},
				error: function(e){console.error(e);}
			});
	   }
	   
	    //生成新图片
	    setImgConfig(e,data);
	    var param = {};
	    param.zoom = jQuery('[name="makeSize"]:checked').val();
        cropzoom.send(cropAction, 'POST', param, function(data) { 
        	if(data.status == 1){
        		 $('.result').find('img').remove();
                 var img = $('<img />').attr('src',data.imgRet);
                 $('.result').find('.txt').hide().end().append(img);
                 jQuery('#messageBox').css('display','block');
        	}else{
        		
        	}
        	//alertx(data.message);
        	jQuery('#messageid').html(data.message);
        });                
   }); 
   $("#restore").click(function(e,data){ 
	   setImgConfig(e,data);
       // $("#generated").attr("src", ""); 
        $('.result').find('img').remove();
        $('.result').find('.txt').show()
        cropzoom.restore();  
        jQuery('#messageBox').css('display','none');
   });
	
   $("#cancel").click(function(e,data){ 
	   var path = $('.result').find('img').attr('src');
	   var data = {'imgUrl':path};
	   jQuery.ajax({  
			url: deleteAction, async : false,type: "POST",
			data : data,
			success: function(response) {
				info = response;
				if(info.status == '1'){
					window.close();
				}
			},
			error: function(e){console.error(e);}
		});
	   
   });
   $("#save").click(function(e,data){ 
	   var path = $('.result').find('img').attr('src');
	   debugger;
	   //var scripts = 'window.opener.'+callbackFun+'('+inputId+',"'+path+'")';
	   //eval(scripts);
	   if(path !=null&&window.opener.updateImagePath!=null){
		   window.opener.updateImagePath(inputId,path);
		   window.close();
	   }else{
		   alert("请裁剪图片或者点击取消按钮取消操作");
	   }
	   
   });
   jQuery('[name="imageForm"]').find('input').autocomplete({
	   minLength : 0,
	   source : function(request,response){
		    var repos_name = this.bindings[0].value;
		    debugger;
		    jQuery('#showinputinfo').val(repos_name);
		    var data = getDataFormInput();
			cropzoom.setSelector(data.selectorX,data.selectorY,data.selectorW,data.selectorH,true);
	    }
	  });
   setImgConfig();
   function setImgConfig(e,data){
	   //debugger;
		var info = $.fn.cropzoom.getParameters(cropzoom,{});
		for(var i in info){
			jQuery('[name="'+i+'"]').val(info[i]);
		}
		data = cropzoom.data("image");
		if(data!=null&&data.scaleX!=null){
			jQuery('[name="scaleX"]').val(xround(1.0/data.scaleX,3));
			jQuery('[name="scaleY"]').val(xround(1.0/data.scaleY,3));
		}
		return info;
	}
   
    function xround(x, num){
	    return Math.round(x * Math.pow(10, num)) / Math.pow(10, num) ;
	}
    
    function getDataFormInput(){
    	var data = {};
    	jQuery('[name="imageForm"]').find('input').each(function(i,v){
    		var key = jQuery(this).attr('name');
    		var value = jQuery(this).val();
    		data[key] = value;
    	});
    	return data;
    }
    
});


</script>
<style type="text/css">
.tableborder{border: 1px solid #34A637;}
#img_to_crop{
		-webkit-user-drag: element;
		-webkit-user-select: none;
	}
.button-wrappers {border: 1px solid #34A637;}
.button-wrappers input{width: 50px;height: 15px;}
.button-wrappers .inputSpan{  line-height: 25px;height: 25px;  
	margin-top: -10px;
}
.button-wrappers tr{margin: 3px;}
.button-wrappers .td1{text-align: right;padding-left: 3px;}
.button-wrappers .td2{padding-left: 3px;padding-right: 3px;}
</style>
</head>
<body>
<div class="Post">
	<div class="Post-body">
		<div class="Post-inner">
			<div class="PostMetadataHeader">
				<h2 class="PostHeader">图片裁剪</h2>
			</div>
			<form name="imageForm">
			<table class="button-wrappers" id="imagInfoId">
				<tr>
					<td class="td1" title="viewPortW">视图宽度(viewPortW)</td><td class="td2"><input name="viewPortW" type="text" value=""></td>
					<td class="td1" title="viewPortH">视图高度(viewPortH)</td><td class="td2"><input name="viewPortH" type="text" value=""></td>
					<td class="td1" title="imageRotate">旋转角度(imageRotate)</td><td class="td2" colspan="3"><input name="imageRotate" type="text" value=""></td>
					
				</tr>
				<tr>
					<td class="td1" title="imageX">图片X坐标(imageX)</td><td class="td2"><input name="imageX" type="text" value=""></td>
					<td class="td1" title="imageY">图片Y坐标(imageY)</td><td class="td2"><input name="imageY" type="text" value=""></td>
					<td class="td1" title="imageW">图片宽度(imageW)</td><td class="td2"><input name="imageW" type="text" value=""></td>
					<td class="td1" title="imageH">图片高度(imageH)</td><td class="td2"><input name="imageH" type="text" value=""></td>
				</tr>
				<tr>
					<td class="td1"  title="selectorX">选取X坐标(selectorX)</td><td class="td2"><input name="selectorX" type="text" value=""></td>
					<td class="td1"  title="selectorY">选取X坐标(selectorY)</td><td class="td2"><input name="selectorY" type="text" value=""></td>
					<td class="td1"  title="selectorW">选取宽度(selectorW)</td><td class="td2"><input name="selectorW" type="text" value=""></td>
					<td class="td1"  title="selectorH">选取高度(selectorH)</td><td class="td2"><input name="selectorH" type="text" value=""></td>
				</tr>
				<tr>
					<td class="td1" title="scaleX">缩放比例X(scaleX)</td><td class="td2"><input name="scaleX" type="text" value=""></td>
					<td class="td1" title="scaleY">缩放比例Y(scaleY)</td><td class="td2"><input name="scaleY" type="text" value=""></td>
					<td class="td1" colspan="3">
					</td>
					
				</tr>
			</table>
			</form>
			<br>
			<span class="button-wrapper" id="crop"> 
				<span class="l"> </span> 
				<span class="r"> </span> 
				<a class="button" href="javascript:void(0)" title="Crop">剪裁</a>
			</span> &nbsp; 
			<span class="button-wrapper" id="restore"> 
				<span class="l"> </span> 
				<span class="r"> </span> 
				<a class="button" href="javascript:void(0)" title="Restore">还原</a>
			</span>&nbsp; 
			<span class="button-wrapper" id="save"> 
				<span class="l"> </span> 
				<span class="r"> </span> 
				<a class="button" href="javascript:void(0)" title="save">保存</a>
			</span> &nbsp; 
			<span class="button-wrapper" id="cancel"> 
				<span class="l"> </span> 
				<span class="r"> </span> 
				<a class="button" href="javascript:void(0)" title="cancel">取消</a>
			</span>
			
			<span style="display: inline-block ;width: 50px;"></span>
			<span class="button-wrapper">
				<label>生成配置：</label>
				<span><input id="delFlag1" name="makeSize" onclick="" type="radio" value="1" checked="checked">
				<label for="delFlag1">当前尺寸</label></span>
				<span><input id="delFlag2" name="makeSize" onclick="" type="radio" value="0">
				<label for="delFlag2">原始尺寸</label></span>
			</span>
			
			<div class="PostContent">
				<div class="boxes">
					<div id="crop_container"></div>
					<div class="result">
						<div class="txt">Here you will see the cropped image</div>
					</div>
					<div class="cleared"></div>
				</div>
				<br /> 
				
			</div>
			<div class="cleared"></div>
		</div>
	 <div class="cleared"></div>
       </div>
   </div>
   <%-- <img alt="" src="${ctxStatic}/crop/cropzoom/1.2/demo/chicas1024.jpg"> --%>
</body>
</html>
